<template>
  <div class="file-relation-db-modal-content">
    <div class="dir">
      <tree-aside v-model:selectedInfo="treeSelectedInfo" />
    </div>
    <div class="detail">
      <content-detail :groupId="groupId" :treeSelectedInfo="treeSelectedInfo" />
    </div>
  </div>
</template>
<script setup>
import { computed, ref } from 'vue'
import TreeAside from './tree-aside.vue'
import ContentDetail from './file-relation-db-modal-content-detail.vue'
let treeSelectedInfo = ref()
let groupId = computed(() => treeSelectedInfo.value?.categoryId)
</script>
<style scoped lang="less">
.file-relation-db-modal-content {
  height: 100%;
  display: flex;
  .dir {
    background: #ffffff;
    border-radius: 2px;
    margin-right: 12px;
    padding: 20px;
    min-width: 212px;
    box-sizing: border-box;
    border-right: 1px solid #f0f0f0;
  }
  .detail {
    flex: 1;
    overflow: hidden;
  }
}
</style>
